<template>
	<view class="selectCity">
		<uni-popup ref="selectCity" type="center">
			<view class="selectCityBox">
				<uni-nav-bar left-icon="back" @clickLeft="hide" fixed="true" status-bar="true" title="选择城市">
				</uni-nav-bar>
				<scroll-view scroll-y="true" class="scrollBox">
					<view class="nowCity">
						<view class="tit">当前城市</view>
						<view class="label act">{{areaAddress}}</view>
					</view>
					<view class="cityList">
						<view class="tit">选择城市</view>
						<uni-collapse accordion="true">
							<block v-for="(items,index) in cityData" :key="index">
								<uni-collapse-item :title="items.provincename">
									<view class="label" v-if="index !== 0" @tap="click(items.id,'',items.provincename)">全部</view>
									<view class="Box" v-for="(item,ind) in items.city" :key="ind">
										<view class="letter">{{ind}}</view>
										<view class="cityBox">
											<view class="label" :style="{marginRight:(i+1)%3 == 0?0+'rpx':45+'rpx'}" v-for="(ite,i) in item" :key="i" @tap="click(items.id,ite.id,ite.cityname)">{{ite.cityname}}</view>
										</view>
									</view>
								</uni-collapse-item>
							</block>
						</uni-collapse>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	export default {
		name: "selectCity",
		components: {
			uniPopup,
			uniCollapse,
			uniCollapseItem
		},
		props: {
			cityData: {
				type: Array
			},
			areaAddress: {
				type: String
			}
		},
		data() {
			return {

			}
		},
		onLoad() {},
		methods: {
			//打开选择面板
			show() {
				this.$refs.selectCity.open()
			},
			//关闭选择面板
			hide() {
				this.$refs.selectCity.close()
			},
			click(pid,id,areaAddress) {
				let data = {
					pid: pid,
					id: id,
					areaAddress:areaAddress
				}
				this.$emit("selected", data)
				this.hide()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.selectCity {
		.selectCityBox {
			position: fixed;
			left: 0;
			top: 0;
			width: 100vw;
			height: 100vh;
			background: #FFF;
			.scrollBox{
				position: absolute;
				//#ifdef H5
				top: 44px;
				//#endif
				//#ifdef APP-PLUS
				top: calc(44px + var(--status-bar-height));
				//#endif
				bottom: 0;
			}
		}

		.nowCity,
		.cityList {
			padding: 0 30rpx;

			.tit {
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
				line-height: 100rpx;
			}
		}

		.cityList {
			margin-top: 30rpx;
			padding-bottom: 100rpx;

			.Box {
				.letter {
					font-size: 30rpx;
					padding-bottom: 20rpx;
					color: #999;
				}

				.cityBox {
					display: flex;
					flex-wrap: wrap;
				}
			}

			/deep/.uni-collapse-cell__title {
				padding: 12px 0 !important;
			}
		}

		.label {
			margin-bottom: 40rpx;
			width: 200rpx;
			box-sizing: border-box;
			padding: 10rpx 0;
			border: 1rpx solid #bbb;
			color: #999;
			font-size: 26rpx;
			text-align: center;
			border-radius: 8rpx;
		}

		.act {
			background: linear-gradient(90deg, #46AEF7 0%, #1DD5E6 100%);
			color: #fff;
			border: none;
			padding: 11rpx 0;
			width: 202rpx;
		}
	}
</style>
